<!DOCTYPE html>
<html>
    <body background="/home/bqh/图片/gakki.jpg">
        <!-- 图像无法显示的时候会显示alt表示的预备文本 -->
        <img src="https://banqinghe.com/images/avatar.jpeg" width="100" height="100" alt="avatar">

        <h2>未设置对齐方式的图像：</h2>
        <p>图像 <img src ="https://banqinghe.com/images/avatar.jpeg"width="100" height="100" alt="avatar"> 在文本中</p>
        <h2>已设置对齐方式的图像：</h2>
        <p>图像 <img src="https://banqinghe.com/images/avatar.jpeg" width="100" height="100" alt="avatar" align="bottom" > 在文本中</p>
        <p>图像 <img src ="https://banqinghe.com/images/avatar.jpeg" width="100" height="100" alt="avatar" align="middle"> 在文本中</p>
        <p>图像 <img src ="https://banqinghe.com/images/avatar.jpeg" width="100" height="100" alt="avatar" align="top"> 在文本中</p>
        <p>请注意，bottom 对齐方式是默认的对齐方式。</p>

        <p>
        <img src ="https://banqinghe.com/images/avatar.jpeg" width="100" height="100" align ="left"> 
        带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
        </p>
        
        <p>
        <img src ="https://banqinghe.com/images/avatar.jpeg" width="100" height="100" align ="right"> 
        带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
        </p>


        <br/>

        <h2>图像缩小为原大小的50%</h2>
        <p>如果已经说了长宽，是在此基础上缩放</p>
        <img src="https://banqinghe.com/images/avatar.jpeg" style="zoom:50%;">

        <p>
        把图像作为链接来使用：
        <a href="https://banqinghe.com/" target="_blank">
        <img border="0" src="https://banqinghe.com/images/avatar.jpeg" width="100" height="100" >
        </a>
        </p>

        <!-- 图像映射 可以让图片上的某一部分成为链接-->
        <p>下面的图像中，只有图片中央直径为10的圆形才是一个链接</p>
        <img src="https://banqinghe.com/images/avatar.jpeg" width="100" height="100" usemap="#webmap" alt="webmap">
        <map name="webmap" id="webmap">
        <area
            shape="circle"
            coords="50,50,5"
            href="https://banqinghe.com/"
            target="_blank"
            alt="my blog"/>
        <!-- 还可以添加更多area -->
        </map>
    </body>
</html>